﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Models.Business.FileUpload;
@using CleanArchitecture.Infrastructure.Models.SystemManage;
@model FileItemModel
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
    int currentSystemModuleId = ViewBag.CurrentSystemModuleId;
    var searchModel = Model.CustomProperties["FileItemSearchModel"] as FileItemSearchModel ?? null;

    var moduleAssignedBtns = ViewBag.ModuleAssignedBtns as IList<SystemDataDicButtonModel> ?? null;
}
@section cssstyles{
    <link href="~/lib/videojs/video-js.min.css" rel="stylesheet" />
    <link href="~/lib/tinyPlayer/src/css/tinyPlayer.css" rel="stylesheet">

    <style type="text/css">
    body {
	    margin: 20px !important;
	    display: flex;
	    flex: auto;
	    flex-direction: column;
	    min-height: 0;
	    background: #f0f2f5;
    }
    .resourcemanage {
	    width: 100% !important;
	    height: 100%;
	    background-color: #fff;
	    margin: 0 !important;
	    padding: 10px 2px;
    }
    .application-list-item {
	    background-color: #fff;
	    border: 1px solid #e8e8e8;
	    border-radius: 4px;
	    cursor: pointer;
	    transition: all .2s;
    }
    .application-list-item:hover {
	    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    }
    .application-list-item .application-list-item-header {
	    padding: 16px 12px 0 12px;
    }
    .application-list-item .application-list-item-header .head {
	    width: 25px;
	    height: 25px;
	    border-radius: 50%;
	    margin-right: 10px;
    }
    .application-list-item .application-list-item-header > h2 {
	    color: #333;
	    font-size: 18px;
	    display: inline-block;
    }
    .application-list-item .application-list-item-body {
	    padding: 12px 12px 12px 50px;
	    font-size: 0;
    }
    .application-list-item .application-list-item-body .text-num-item {
	    display: inline-block;
	    width: 50%;
	    font-size: 26px;
	    color: #666;
    }
    .application-list-item .application-list-item-body .text-num-item .text-num-item-title {
	    font-size: 12px;
	    color: #999;
	    margin-bottom: 10px;
    }
    .application-list-item .application-list-item-body .text-num-item small {
	    font-size: 16px;
    }
    .application-list-item .application-list-item-tool {
	    font-size: 0;
	    background-color: #FAFAFA;
	    border-top: 1px solid #e8e8e8;
	    padding: 10px 0 5px 0;
	    border-bottom-left-radius: 4px;
	    border-bottom-right-radius: 4px;
    }
    .application-list-item .application-list-item-tool .application-list-item-tool-item {
	    display: inline-block;
	    width: 25%;
	    font-size: 18px;
	    text-align: center;
	    color: #999;
	    border-right: 1px solid #e8e8e8;
	    box-sizing: border-box;
	    cursor: pointer;
    }
    .application-list-item .application-list-item-tool .application-list-item-tool-item:last-child {
	    border-right: none;
    }
    .resourcetitle {
	    padding: 6px;
	    height: 44px;
	    overflow: hidden;
    }
    video {
        background: transparent no-repeat 0 0; 
        -webkit-background-size: cover; 
           -moz-background-size: cover; 
             -o-background-size: cover; 
                background-size: cover; 
    }
    </style>
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
}
<!-- 正文开始 -->
<div class="resourcemanage layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <fieldset class="layui-elem-field">
                <div class="layui-field-box pagebuttongroup">
                    @await Component.InvokeAsync("PageButton")
                </div>
            </fieldset>
        </div>
        <div class="layui-card-body" style="padding-top: 30px;">
            <div class="layui-row layui-col-space30" id="ResourceGrid" v-if="resources.length > 0">
                <div class="layui-col-md3" v-for="(item,index) in resources" v-bind:key="item.Id">
                    <div class="application-list-item">
                        <div class="application-list-item-header">
                            <i class="layui-icon" v-bind:class="selectFileType(item.FileType)" style="font-size: 22px;"></i>
                            <h2>{{item.Category}}</h2>
                        </div>
                        <div class="application-list-item-body">
                            <div class="text-num-item">
                                <div class="text-num-item-title">存储方式</div>
                                <div class="text-num-item-text">
                                    <i class="layui-icon" v-bind:class="[item.StoreType===1 ?'layui-icon-export':'layui-icon-upload']" style="font-size: 22px;"></i>
                                </div>
                            </div>
                            <div class="text-num-item">
                                <div class="text-num-item-title">下载次数</div>
                                <div class="text-num-item-text">
                                    {{item.DownloadCount}}
                                    <small>次</small>
                                </div>
                            </div>
                        </div>
                        <div class="layui-text resourcetitle">{{item.TitleAttribute}}</div>
                        <div class="application-list-item-tool">
                            <span class="application-list-item-tool-item" v-on:click="Preview(item)">
                                <i class="layui-icon layui-icon-search toolgroup" data-tips="预览" lay-offset="0,-8px"></i>
                            </span>
                            @foreach (var btn in moduleAssignedBtns)
                            {
                                <span class="application-list-item-tool-item" v-on:click="ItemClick(@btn.Id, '@btn.EventName', item)">
                                    <i class="@btn.IconCssClass toolgroup" data-tips="@btn.DisplayName" lay-offset="0,-8px"></i>
                                </span>
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-container" id="pageContainer" style="float:left;"></div>
        </div>
    </div>
</div>

<div id="videobox" class="layui-hide">
    <video id="videoplayer"
           class="video-js"
           controls
           preload="auto"
           width="400"
           height="300"
           poster=""
           data-setup="{}">
        <source src="" type="" />
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
</div>

<input type="text" class="layui-hide" id="currentSystemModuleId" value="@currentSystemModuleId" />
@section scripts{
    <script src="~/lib/videojs/video.min.js"></script>
    <script src="~/lib/howler/howler.min.js" crossorigin="anonymous"></script> @*For tiny audio player*@
    <script src="~/lib/tinyPlayer/src/js/tinyPlayer.js"></script>

    <script type="text/javascript">
        layui.use(['layer', 'element', 'laypage', 'iziToast'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                element = layui.element,
                laypage = layui.laypage,
                iziToast = layui.iziToast;
            var lodash = _;
            var PageSize = @searchModel.PageSize;
            var requestData = {
                '@searchModel.nameof(m => m.Page)' : 1,
                '@searchModel.nameof(m => m.PageSize)' : PageSize
            };

            var myPlayer = videojs('#videoplayer', {}, function onPlayerReady() {
                videojs.log("播放器已经准备好了!");
            });
            let editurl = "/business/resourcemanage/edit",
                editWidowConfig = {
                    title: "编辑/修改",
                    type: 2,
                    content: "",
                    anim: 3,
                    width: 460,
                    height: 600,
                    iframeAuto: true
                },
                currentSystemModuleId = $("#currentSystemModuleId").val();
            
            var vm = new Vue({
                el: '#ResourceGrid',
                data: {
                    resources: [],
                    pager: null
                },
                created: function () {
                    var _this = this;
                    var $loading = Util.loading(false, 0);
                    _this.LoadResourceList(requestData, $loading);
                },
                methods: {
                    LoadResourceList: function (req, loading) {
                        var _this = this;
                        httpapi.fetchPost('/api/backend/business/getresourcelist', req).then(res => {
                            loading.remove();
                            if (!httpapi.checkResponse(res))
                                //输入信息校验错误
                                iziToast.error({
                                    title: '消息通知',
                                    message: res.message
                                });
                            else {
                                _this.resources = res.data.Data;
                                if (_this.pager === null) {
                                    _this.pager = laypage.render({
                                        elem: 'pageContainer'
                                        , count: res.data.RecordsTotal
                                        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                                        , theme: '#1E9FFF'
                                        , limit: @searchModel.PageSize
                                        , limits: [@searchModel.AvailablePageSizes]
                                        , jump: function (obj, first) {
                                            //首次不执行
                                            if (!first) {
                                                requestData.Page = obj.curr;
                                                requestData.PageSize = obj.limit;
                                                var $loading = Util.loading(false, 0);
                                                _this.LoadResourceList(requestData, $loading);
                                            }
                                        }
                                    });
                                }
                            }
                        }).catch(error => console.error(error));
                    },
                    selectFileType: function (filetype) {
                        var icon = "layui-icon-file-b";
                        switch (filetype) {
                            case 1:
                                icon = "layui-icon-picture";
                                break;
                            case 2:
                                icon = "layui-icon-voice";
                                break;
                            case 3:
                                icon = "layui-icon-align-left";
                                break;
                            case 4:
                                icon = "layui-icon-video";
                                break;
                            case 5:
                            default:
                                icon = "layui-icon-file-b";
                                break;
                        }
                        return icon;
                    },
                    ReloadPage: function () {
                        var _this = this;
                        requestData.Page = 1;
                        requestData.PageSize = PageSize;
                        var $loading = Util.loading(false, 0);
                        _this.LoadResourceList(requestData, $loading);
                    },
                    ItemClick: function (btnId, eventName, item) {
                        var _this = this;
                        if (eventName === 'Edit') {
                            editWidowConfig.end = function () {
                                _this.ReloadPage();
                            };
                            editWidowConfig.content = editurl + "?moduleid=" + currentSystemModuleId + "&buttonid=" + btnId + "&resourceid=" + item.Id;
                            Util.OpenMainWindow(editWidowConfig);
                            return;
                        }
                        else if (eventName === 'Delete') {
                            layer.confirm("确定要进行删除操作吗？", function (confirmIndex) {
                                layer.close(confirmIndex);
                                iziToast.loading("删除中，请稍候...");
                                let node = new Object(DeleteNodeModel);
                                node.EntityId = item.Id;
                                node.ButtonId = btnId;
                                node.ModuleId = currentSystemModuleId;
                                $.deleteJSON("/api/backend/business/resourcemanage/delete", node, function (res) {
                                    iziToast.destroy();
                                    if (!httpapi.checkResponse(res)) {
                                        //输入信息校验错误
                                        iziToast.error({
                                            title: '消息通知',
                                            message: res.message
                                        });
                                    } else {//Success
                                        iziToast.success({
                                            title: '消息通知',
                                            message: res.message
                                        });
                                        _this.ReloadPage();
                                    }
                                });
                            });
                        }
                    },
                    Preview: function (item) {
                        var boxoption = {
                            type: 1,
                            shade: 0.8,
                            offset: 'auto',
                            area: [],
                            shadeClose:true,
                            scrollbar: false,
                            title: item.TitleAttribute === "" ? item.Category : item.TitleAttribute,
                            content: "",
                            success: null,
                            end: null
                        };
                        if (item.FileType === 1) //Image
                        {
                            var imgHtml = "<img src='" + item.VirtualUrl + "' width='450px' height='450px'/>";
                            boxoption.area = [450 + 'px', 500 + 'px'];
                            boxoption.content = imgHtml;
                            layer.open(boxoption);
                        }
                        else if (item.FileType === 2) { //Audio
                            var tinyplayer = null;
                            var audioHtml = "<div id='audiobox'><audio controls class='iru-tiny-player' data-title='" + boxoption.title + "'>";
                            audioHtml += "<source src='" + item.VirtualUrl + "' type='" + item.MimeType + "'></audio></div>";
                            boxoption.area = [360 + 'px', 120 + 'px'];
                            boxoption.content = audioHtml;
                            boxoption.success = function (layero, index) {
                                tinyplayer = irubataru.tinyPlayer.createPlayerFromTags();
                                tinyplayer.play();
                                layero.find('div#audiobox').attr("style", "margin-top:5px" );
                            };
                            boxoption.end = function () {
                                tinyplayer.stop();
                            };
                            layer.open(boxoption);
                            
                        }
                        else if (item.FileType === 4) {//Video
                            boxoption.area = ['400px', '350px'];
                            boxoption.content = $("#videobox");
                            boxoption.success = function (layero) {
                                $('#videobox').removeClass("layui-hide");
                                myPlayer.src({ src: item.VirtualUrl, type: item.MimeType });
                                myPlayer.play();
                            };
                            boxoption.end = function () {
                                $('#videobox').addClass("layui-hide");
                                myPlayer.pause();
                            };
                            layer.open(boxoption);
                        }
                    }
                }
            });

            //监听顶部按钮栏
            var PageButtonEvent = {
                Add: function (buttonid) {
                    editWidowConfig.content = editurl + "?moduleid=" + currentSystemModuleId + "&buttonid=" + buttonid;
                    editWidowConfig.end = function () {
                        vm.ReloadPage();
                    };
                    Util.OpenMainWindow(editWidowConfig);
                    return false;
                }
            };
            $('.pagebuttongroup .layui-btn').on('click', function (e) {
                e.preventDefault();
                var type = $(this).data('type');
                var buttonid = $(this).data("buttonid");
                PageButtonEvent[type] ? PageButtonEvent[type].call(this, buttonid) : '';
            });
        });
    </script>
}
